<!--
 * @Author: aster lipian1004@163.com
 * @Date: 2025-08-01 15:06:05
 * @FilePath: \easy-flowable-vue\src\views\workflow\components\common\url-param.vue
 * @Description: URL参数组件
 * Copyright (c) 2025 by Aster, All Rights Reserved.
-->
<template>
  <el-dialog
    v-model="visible"
    width="60%"
    :close-on-click-modal="false"
    :lock-scroll="false"
    destroy-on-close
  >
    <template #header="{ titleId, titleClass }">
      <span :id="titleId" :class="titleClass">URL参数设置</span>
      <span style="font-size: 12px; color: #bbb"> (设置后作为URL参数进行传递) </span>
    </template>

    <div class="url-content">
      <div>
        <el-row v-for="(item, index) in params" :key="index" class="url-content__item">
          <el-col :span="2" class="url-content__item__col justify-center"> 参数: </el-col>
          <el-col :span="6" class="url-content__item__col justify-center">
            <el-input v-model="item.key" style="width: 100%" />
          </el-col>
          <el-col :span="1" class="url-content__item__col justify-center"> = </el-col>
          <el-col :span="3" class="url-content__item__col justify-center">
            <el-select v-model="item.type" style="width: 100%">
              <el-option label="固定值" value="fixed" />
              <el-option label="数据联动" value="linkage" />
            </el-select>
          </el-col>
          <el-col :span="6" class="url-content__item__col justify-center mx-5px">
            <el-select
              v-if="item.type === 'linkage'"
              v-model="item.value"
              placeholder="请选择组件"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in _formItems"
                :key="index"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
            <el-input v-else v-model="item.value" style="width: 100%" />
          </el-col>
          <el-col :span="2" class="url-content__item__col justify-center">
            <i class="iconfont icon-shanchu" @click="deleteParam(index)"></i>
          </el-col>
        </el-row>
      </div>
      <div class="flex justify-end">
        <el-button type="primary" link @click="addParam()">
          <i class="iconfont icon-plus pr-5px"></i>添加参数
        </el-button>
      </div>
    </div>

    <template #footer>
      <el-button @click="visible = false">{{ $t('button.cancel') }}</el-button>
      <el-button type="primary" @click="onSubmit">{{ $t('button.confirm') }}</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
  import { computed, ref } from 'vue';
  import { useWorkFlowStore } from '@/stores/modules/workflow';
  import { flatFormItems } from '@/utils/workflow';

  const emit = defineEmits(['callback']);

  // 工作流store
  const workFlowStore = useWorkFlowStore();
  // 是否显示
  const visible = ref(false);

  // 参数列表
  const params = ref<WorkComponent.UrlParams[]>([]);

  /**
   * @description: 表单组件
   * @return {*}
   */
  const _formItems = computed(() => {
    let items = flatFormItems(workFlowStore.design.formItems);
    items = items.filter((item: any) => {
      return (
        item.name === 'InputText' ||
        item.name === 'InputNumber' ||
        item.name === 'InputAmount' ||
        item.name === 'SelectSingle' ||
        item.name === 'DateTime'
      );
    });
    return items;
  });

  /**
   * @description: 新增参数
   * @return {*}
   */
  const addParam = () => {
    params.value.push({
      key: '',
      type: 'fixed',
      value: '',
    });
  };

  /**
   * @description: 删除规则
   * @param {number} index 下标
   * @return {*}
   */
  const deleteParam = (index: number) => {
    params.value.splice(index, 1);
  };

  /**
   * @description: 提交
   */
  const onSubmit = () => {
    visible.value = false;
    emit('callback', params.value);
  };

  /**
   * @description: 初始化
   * @param {WorkComponent.UrlParams[]} urlParams
   * @return {*}
   */
  const init = (urlParams: WorkComponent.UrlParams[]) => {
    params.value = [];
    if (urlParams.length == 0) {
      addParam();
    } else {
      params.value = urlParams;
    }
    visible.value = true;
  };

  defineExpose({
    init,
  });
</script>
<style scoped lang="scss">
  .url-content {
    width: 100%;

    &__title {
      display: flex;

      i {
        padding: 0 5px;
      }
    }

    &__item {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 10px;

      &__col {
        display: flex;
        align-items: center;
      }
    }
  }
</style>
